<!--修改密码-->
<template>
  <div>
    <a-form
      v-if="$route.name === 'loginPassword'"
      :form="form"
      @submit="handleSubmit"
    >
      <a-form-item v-bind="formItemLayout" label="原密码">
        <a-input
          type="password"
          placeholder="请输入当前登录密码"
          v-decorator="[
            'old_password',
            { rules: [{ required: true, message: '请输入原密码' }] }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="新密码">
        <a-input
          type="password"
          placeholder="请输入6-20位的字母+数字组合"
          v-decorator="[
            'password',

            {
              rules: [
                { required: true, message: '请输入新密码' },
                {
                  validator: validateToNextPassword
                },
                {
                  validator: validatePsw
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认密码">
        <a-input
          type="password"
          placeholder="请输入新密码"
          v-decorator="[
            'confirm',
            {
              rules: [
                { required: true, message: '请输入密码' },
                {
                  validator: compareToFirstPassword
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          type="primary"
          class="submit-btn"
          html-type="submit"
          size="large"
        >
          确认
        </a-button>
      </a-form-item>
    </a-form>
    <a-form v-else :form="form" @submit="handleSubmit">
      <a-form-item v-if="hadPayPsw" v-bind="formItemLayout" label="原支付密码">
        <a-input
          type="password"
          placeholder="请输入当前支付密码"
          v-decorator="[
            'oldPayPwd',
            { rules: [{ required: true, message: '请输入原支付密码' }] }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="新密码">
        <a-input
          type="password"
          placeholder="请输入6-20位的字母+数字组合"
          v-decorator="[
            'newPayPwd',
            {
              rules: [
                { required: true, message: '请输入新密码' },
                {
                  validator: validateToNextPassword
                },
                {
                  validator: validatePsw
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认密码">
        <a-input
          placeholder="请输入新密码"
          type="password"
          v-decorator="[
            'confirm',
            {
              rules: [
                { required: true, message: '请输入确认密码' },
                {
                  validator: compareToFirstPayPassword
                }
              ]
            }
          ]"
        />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="验证码">
        <a-row :gutter="8">
          <a-col :span="14">
            <a-input
              autocomplete="off"
              v-decorator="[
                'code',
                {
                  initialValue: '',
                  rules: [
                    {
                      required: true,
                      message: '请输入验证码'
                    }
                  ]
                }
              ]"
            />
          </a-col>
          <a-col :span="10">
            <a-button
              class="code-btn"
              block
              @click="getCode"
              v-if="!isShowTimer"
              >获取验证码</a-button
            >
            <span v-else class="count-wrapper">{{ count }}s</span>
          </a-col>
        </a-row>
      </a-form-item>
      <a-form-item style="text-align: center">
        <a-button
          class="submit-btn"
          type="primary"
          html-type="submit"
          size="large"
        >
          确认
        </a-button>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { Row, Col } from "ant-design-vue";
export default {
  components: {
    aRow: Row,
    aCol: Col
  },
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 16,
            offset: 8
          }
        }
      },
      timer: null,
      isShowTimer: false,
      count: 60
    };
  },
  beforeCreate() {
    this.form = this.$form.createForm(this);
  },
  methods: {
    validatePsw(rule, value, callback) {
      let reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,20}$/;
      if (value && !reg.test(value)) {
        callback("密码格式不正确，请输入6-20位的字母+数字组合");
      }
      callback();
    },
    validateToNextPassword(rule, value, callback) {
      const form = this.form;
      if (value && this.confirmDirty) {
        form.validateFields(["confirm"], { force: true });
      }
      callback();
    },
    compareToFirstPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("password")) {
        callback("两次输入的密码不一致");
      } else {
        callback();
      }
    },
    compareToFirstPayPassword(rule, value, callback) {
      const form = this.form;
      if (value && value !== form.getFieldValue("newPayPwd")) {
        callback("两次输入的密码不一致");
      } else {
        callback();
      }
    },
    handleSubmit(e) {
      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        if (!err) {
          let obj = JSON.parse(JSON.stringify(values));
          delete obj.confirm;
          let api = "";
          if (this.$route.name === "loginPassword") {
            api = this.$api.changePsw;
          } else {
            if (this.hadPayPsw) {
              api = this.$api.changePayPsw;
              obj.pay_password = JSON.parse(JSON.stringify(obj.newPayPwd));
              delete obj.newPayPwd;
            } else {
              api = this.$api.setPayPsw;
            }
          }
          this.$ajax
            .post(api, obj)
            .then(() => {
              if (this.$route.name === "loginPassword") {
                this.$message.success("修改成功，请重新登录!");
                this.$router.push({ name: "login" });
              } else {
                this.$message.success("修改支付密码成功!");
                this.$router.push({ name: "person" });
              }
            })
            .catch(err => {
              this.$message.error(err);
            });
        }
      });
    },
    // 获取验证码
    getCode() {
      clearInterval(this.timer);
      this.count = 60;
      this.$ajax
        .post(this.$api.sendPayCode, {
          mobile: this.mobile
        })
        .then(res => {
          this.$message.success(res.msg);
          this.isShowTimer = true;
          this.timer = setInterval(() => {
            this.count--;
            if (this.count === 0) {
              this.isShowTimer = false;
              clearInterval(this.timer);
              this.count = 60;
            }
          }, 1000);
        })
        .catch(err => {
          this.isShowTimer = false;
          this.$message.error(err);
        });
    }
  },
  computed: {
    hadPayPsw() {
      return this.$store.state.hadPayPsw;
    },
    mobile() {
      return this.$store.state.mobile;
    }
  },
  beforeDestroy() {
    clearInterval(this.timer);
    this.timer = null;
  }
};
</script>

<style scoped lang="less">
.ant-form {
  max-width: 500px;
  margin: 20px auto;
}
</style>
